import { Paper } from "@mui/material";
import styled from "styled-components";
import { connect } from "react-redux";
import {
  parseToRecordWeek,
  parseToRecordDayList,
  parseToRecordMonth,
} from "redux/reducers/recordList";
import dayjs from "dayjs";
const HomePaper = (props: any) => {
  const records = props.records;
  const weekSectionOutput = parseToRecordWeek(records).totalOutput;
  const recordsDay = parseToRecordDayList(records);
  const recordsMonth = parseToRecordMonth(records);
  const curDay = recordsDay.find((record) => {
    return record.currentDate === dayjs().format("M月DD日");
  });
  return (
    <div>
      <Paper
        elevation={0}
        sx={{ height: "150px", margin: "0 10px", backgroundColor: "#fff" }}
      >
        <HomePaperContent>
          <ul>
            <li className="month-section-input">
              <div className="in">本月收入</div>
              <span className="num">{recordsMonth.totalInput}</span>
            </li>
            <li className="week-section-output">
              <div className="out">本周支出</div>
              <span className="num">{weekSectionOutput}</span>
            </li>
            <li className="month-section-output">
              <div className="out">本月支出</div>
              <span className="num">{recordsMonth.totalOutput}</span>
            </li>
            <li className="spacer"></li>
            <li className="day-section-output">
              今日支出
              <span className="num">
                {curDay===undefined ? "0.00" : curDay?.totalOutput}
              </span>
            </li>
          </ul>
        </HomePaperContent>
      </Paper>
    </div>
  );
};
const HomePaperContent = styled.div`
  padding: 5px;
  width: 100%;
  height: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    > li {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      color: #333;
      font-size: 12px;
      .num {
        margin-top: 2px;
        color: #333;
        font-size: 18px;
      }
      > div {
        padding: 5px 7px;
        color:white;
        border-radius: 14px;
      }
      .in {
        background-color: #90d781;
      }
      .out {
        background-color: #fe9798;
      }
    }
    .spacer {
      width: 100%;
      height: 1px;
      padding: 3px;
    }

    .day-section-output {
      font-size: 20px;
      margin-bottom: 6px;
      .num {
        color: #fe9798;
        font-size: 22px;
      }
    }
  }
`;
const mapStateToProps = (state: any) => {
  return { records: state.record };
};
export default connect(mapStateToProps)(HomePaper);
